<template>
  <div class="weekendGo">
    <div class="weekend-title">周末去哪儿</div>
    <div class="GoPlace" v-for="item in weekendList" :key="item.id">
      <img class="place-image" :src="item.url" />
      <div class="Goplace-detail">
        <span class="place-name">{{item.name}}</span>
        <div class="place-info">
          <p class="info-content">{{item.info}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['weekendList'],
  data () {
    return {
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.weekendGo {
  display: flex
  flex-direction: column
  padding: 0.2rem 0
  background-color: #f7f7f7
}
.weekend-title {
  padding-left: 0.2rem
}
.Goplace-detail {
  padding-left: 0.2rem
}
.place-image {
  width: 100%
  margin-top: 0.2rem
  margin-bottom: 0.2rem
}
.place-info {
  width:100%
}
.info-content {
  font-size: 0.2rem
  color: #666
  margin-top: 0.2rem
  ellipsis()
}
</style>
